<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import nextApi from '@/api/nextApi';
import { downLoadFile } from '@/utils';

@Component({})
export default class index extends Vue {
  filterForm: any = {
    batch: '',
    materialName: '',
  };

  tableOption: any = {
    loading: false,
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        customRender: (text: any, record: any, index: number) => index + 1,
      },
      {
        title: '批号',
        dataIndex: 'batch',
        key: 'batch',
        align: 'center',
      },
      {
        title: '产品名称',
        dataIndex: 'materialName',
        key: 'materialName',
        align: 'center',
      },
      {
        title: '产品大类',
        dataIndex: 'inventoryType',
        key: 'inventoryType',
        align: 'center',
      },
      {
        title: '有效期至',
        dataIndex: 'validTime',
        key: 'validTime',
        align: 'center',
      },
      {
        title: '标准类型',
        dataIndex: 'standard',
        key: 'standard',
        align: 'center',
      },
      {
        title: '规格',
        dataIndex: 'spec',
        key: 'spec',
        align: 'center',
      },
      {
        title: '装量',
        dataIndex: 'loadingQuantity',
        key: 'loadingQuantity',
        align: 'center',
      },
      {
        title: 'ERP可用量',
        dataIndex: 'stockNumErp',
        key: 'stockNumErp',
        align: 'center',
        className: "purple-header",
      },
      {
        title: '中转库可用量',
        dataIndex: 'stockNumSys',
        key: 'stockNumSys',
        align: 'center',
        className: "purple-header",
      },
      {
        title: '生产日期',
        dataIndex: 'scTime',
        key: 'scTime',
        align: 'center',
      },
    ],
    dataSource: [],
    pagination: {
      pageSize: 10,
      current: 1,
      total: 0,
      showTotal: (total: number) => `共${total}条`,
      onChange: (page: number, pageSize: number) => {
        this.tableOption.pagination.current = page;
        this.getTableData();
      },
    },
  };

  async getTableData() {
    this.tableOption.loading = true;
    try {
      const params = {
        pageSize: this.tableOption.pagination.pageSize,
        page: this.tableOption.pagination.current,
        materialType: '配方颗粒',
        batch: this.filterForm.batch,
        materialName: this.filterForm.materialName,
      };
      const res = await nextApi.productStorageList(params);
      this.tableOption.dataSource = res.data?.rows || res.data?.records || [];
      this.tableOption.pagination.total = res.data?.total || 0;
    } finally {
      this.tableOption.loading = false;
    }
  }

  handleSearch() {
    this.tableOption.pagination.current = 1;
    this.getTableData();
  }

  handleReset() {
    this.filterForm.batch = '';
    this.filterForm.materialName = '';
    this.handleSearch();
  }

  exportData() {
    this.tableOption.loading = true;
    nextApi.exportPorductStorage((res: any) => {
      const blob = new Blob([res.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      });
      downLoadFile(blob, '产品库存表.xlsx');
      this.tableOption.loading = false;
    });
  }

  mounted() {
    this.getTableData();
  }
}
</script>

<template>
  <div class="yuan-container container">
    <a-card title="产品库存表">
      <div class="filter-panel" style="padding-bottom: 20px;">
        <a-form layout="inline" :model="filterForm">
          <a-form-item label="批号">
            <a-input v-model="filterForm.batch" placeholder="请输入批号" allowClear />
          </a-form-item>
          <a-form-item label="产品名称">
            <a-input v-model="filterForm.materialName" placeholder="请输入产品名称" allowClear />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
          </a-form-item>
          <a-form-item style="float: right;">
            <a-button type="primary" @click="exportData">导出</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="table-container">
        <a-table
          :loading="tableOption.loading"
          bordered
          :rowKey="item => item.id"
          :data-source="tableOption.dataSource"
          :columns="tableOption.tableColumns"
          :pagination="tableOption.pagination"
        ></a-table>
      </div>
    </a-card>
  </div>
</template>

<style scoped lang="scss">
.table-container {
  margin: 20px 0;
}
.ant-table td {
  white-space: nowrap;
}
.ant-table-thead > tr > th.purple-header {
    background-color: #c787ee !important;
    color: #fff !important;
}
</style>
